<template>
    <div class="study-preview">
        <div class="container" v-loading="loading">
            <div class="header">
                <div class="container flex items-center">
                    <img src="@/assets/images/study-preview-icon.png" alt="" />
                    <div>
                        <div class="text">典型工作场景&问题</div>
                        <div class="title">{{ data.name }}</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <section  >
                    <div class="title">主题描述</div>
                    <div class="text">{{ data.context }}</div>
                </section>
                <section >
                    <div class="title">学习内容和收获</div>
                    <div class="text">{{ data.content }}</div>
                </section>
                <section v-if="data.capability_list && data.capability_list.length">
                    <div class="title">涉及的知识、能力</div>
                    <div class="text">
                        <div class="list dot" v-for="(item, i) in data.capability_list" :key="i">
                            <div class="flex-1">
                                <pre>{{ item }}</pre>
                            </div>
                        </div>
                    </div>
                </section>
                <section v-if="list && list.length">
                    <div class="title">学习节点</div>
                    <div class="text">
                        <div
                            v-for="item in list"
                            :key="item.id"
                            class="list hover-list flex items-center justify-between cursor-pointer"
                            @click="toDetail(item.id)"
                        >
                            <div class="flex items-center">
                                <img v-if="item.type === 1" src="@/assets/images/article.png" alt="">
                                <img v-else src="@/assets/images/preview-video.png" alt="">
                                <span>{{ item.name }}</span>
                            </div>

                            <!-- <i class="el-icon-lock lock" v-if="!item.is_free"></i> -->
                        </div>
                    </div>
                </section>
                <section v-if="teacher && teacher.length">
                    <div class="title">专家&讲师</div>
                    <div class="text">
                        <div class="flex list" v-for="item in teacher" :key="item.id">
                            <img :src="item.img" alt="" class="teacher-avatar" />
                            <div class="flex-1">
                                <div class="teacher">{{ item.name }}</div>
                                <div class="teacher-desc">{{ item.position + item.describe }}</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <div class="text-center mt-4">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            data: {},
            list: [],
            teacher: [],
            id: '',
        };
    },
    methods: {
        fetchData() {
            API.get(`course/detail/${this.id}`).then(res => {
                this.data = res || {};
            });
        },

        fetchList() {
            API.get(`label/section/${this.id}`).then(res => {
                this.list = res;
            });
        },

        fetchTeacher() {
            API.get(`label/teacher/course/${this.id}`).then(res => {
                this.teacher = res;
            });
        },

        toDetail(id) {
            this.$router.push({
                name: 'LabelManage.Detail',
                params: { id },
            });
        },
    },
    async mounted() {
        const id = this.$route.params.id;

        if (id) {
            this.id = id;
            this.loading = true;
            await this.fetchData();
            await this.fetchList();
            await this.fetchTeacher();
            this.loading = false;
        }
    },
};
</script>

<style lang="scss" scoped>
.study-preview {

    .header {
        background: #fff;
        padding: 40px 30px;
        margin: 10px 0 14px;

        img {
            width: 60px;
            margin-right: 25px;
        }

        .text {
            font-size: 16px;
            color: rgb(153, 153, 153);
            margin-bottom: 6px;
        }

        .title {
            font-size: 24px;
            color: rgb(51, 51, 51);
            line-height: 1.4;
        }
    }

    .content {
        background: #fff;
        padding: 20px 30px;

        section {
            margin-bottom: 36px;
            font-size: 16px;
            color: rgba(51, 51, 51, 0.85);

            .list {
                margin-bottom: 20px;

                pre {
                    white-space: pre-line;
                }

                &.hover-list {
                    transition: all 0.3s;
                    padding: 10px 0;
                    margin-bottom: 0;

                    &:hover {
                        box-shadow: 14px 6px 25px rgba(0, 0, 0, .1);
                    }

                    img {
                        width: 22px;
                    }
                }

                i {
                    font-size: 18px;
                    color: rgb(45, 112, 174);
                    margin-right: 16.5px;
                }

                img {
                    margin-right: 16.5px;
                }

                &.dot {
                    display: flex;
                    align-items: baseline;

                    &::before {
                        content: '';
                        display: block;
                        width: 4px;
                        height: 4px;
                        border-radius: 100%;
                        background: rgb(45, 112, 174);
                        margin-right: 12px;
                        position: relative;
                        top: -4px;
                    }
                }

                .lock {
                    color: rgba(51, 51, 51, 0.9);
                }
            }

            .text {
                line-height: 1.8;
            }
        }

        .title {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: rgb(51, 51, 51);
            margin-bottom: 25px;

            &::before {
                content: '';
                display: inline-block;
                width: 6px;
                height: 20px;
                background: rgb(45, 112, 174);
                margin-right: 8px;
                border-radius: 2px;
            }
        }

        .teacher-avatar {
            width: 72px;
            height: 72px;
            border-radius: 100%;
            margin-right: 26px;
        }

        .teacher {
            color: rgb(51, 51, 51);
            margin-bottom: 7px;
        }

        .teacher-desc {
            font-size: 14px;
            line-height: 1.5;
        }
    }
}
.el-breadcrumb {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
        display: none;
    }
    .el-breadcrumb__item {
        // flex-shrink: 0;
        flex: 0 0 auto;
    }
}
@media screen and (max-width: 768px) {
}
</style>
